<template>
	<view class="container landscape">
		<!-- 游戏准备界面 -->
		<view class="prepare-screen" v-if="gameState === 'prepare'">
			<text class="title">超级记忆挑战</text>
			<text class="subtitle">记住20个数字的位置，然后找出所有目标数字</text>
			<button class="start-btn" @click="startGame">
				<text>开始挑战</text>
				<view class="btn-decor"></view>
			</button>
		</view>

		<!-- 记忆阶段 -->
		<view class="memory-screen" v-if="gameState === 'memory'">
			<view class="header">
				<text class="timer">记忆时间: {{ memoryTimeLeft }}秒</text>
				<view class="progress-bar"> 
					<view class="progress" :style="{width: `${(memoryTimeLeft/memoryTime)*100}%`}"></view>
				</view>
			</view>
			<view class="card-grid">
				<view v-for="(card, index) in cards" :key="index" class="card" :style="{
            backgroundColor: cardColors[index % cardColors.length],
            transform: `rotate(${cardRotations[index % cardRotations.length]})`
          }" @click="cardClick(index)">
					<text class="card-number">{{ card.number }}</text>
				</view>
			</view>
		</view>

		<!-- 答题阶段 -->
		<view class="answer-screen" v-if="gameState === 'answer'">
			<view class="header">
				<text class="prompt">找出所有数字: {{ targetNumber }}</text>
				<text class="stats">
					<text class="lives">❤️ × {{ lives }}</text>
					<text class="score">⭐ {{ score }}</text>
				</text>
			</view>
			<view class="card-grid">
				<view v-for="(card, index) in cards" :key="index" class="card" :class="{
            'flipped': card.flipped,
            'correct': card.correct,
            'wrong': card.wrong
          }" @click="selectCard(index)" :style="{
            backgroundColor: cardColors[index % cardColors.length],
            transform: `rotate(${cardRotations[index % cardRotations.length]})`
          }">
					<view class="card-front">
						<text class="card-number">?</text>
					</view>
					<view class="card-back">
						<text class="card-number">{{ card.number }}</text>
					</view>
					<view class="card-effects">
						<view class="sparkle" v-for="(sparkle, i) in 3" :key="i"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 游戏结束界面 -->
		<view class="game-over-screen" v-if="gameState === 'gameover'">
			<view class="result-card">
				<text class="title">{{ score >= 100 ? '🎉 太棒了!' : '游戏结束!' }}</text>
				<text class="final-score">得分: {{ score }}</text>
				<text class="message">{{ getResultMessage() }}</text>
				<button class="restart-btn" @click="resetGame">
					<text>再玩一次</text>
					<view class="btn-decor"></view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameState: 'prepare', // prepare | memory | answer | gameover
				cards: [],
				cardColors: [
					'#FF9AA2', '#FFB7B2', '#FFDAC1', '#E2F0CB', '#B5EAD7', '#C7CEEA',
					'#A2D7D8', '#B5F2EA', '#C1F7DC', '#D0F7E8', '#E8F8F8', '#F0F8FF'
				],
				cardRotations: ['-2deg', '1deg', '0deg', '-1deg', '2deg', '-3deg'],
				memoryTime: 15, // 记忆时间15秒
				memoryTimeLeft: 15,
				memoryTimer: null,
				targetNumber: null,
				score: 0,
				lives: 10,
				cardCount: 20, // 10张卡片
				remainingTargets: 0,
				cardClickCount: 0
			}
		},
		created() {
			this.generateCards();
		},
		methods: {
			generateCards() {
				// 生成1-10的不重复数字
				let numbers = Array.from({
					length: 20
				}, (_, i) => i + 1);

				// 打乱顺序
				numbers = this.shuffleArray(numbers);

				// 创建卡片对象
				this.cards = numbers.map(number => ({
					number: number,
					flipped: false,
					correct: false,
					wrong: false
				}));
			},

			shuffleArray(array) {
				const newArray = [...array];
				for (let i = newArray.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
				}
				return newArray;
			},

			startGame() {
				this.gameState = 'memory';
				this.memoryTimeLeft = this.memoryTime;
				this.cardClickCount = 0;

				// 重置所有卡片状态
				this.cards = this.cards.map(card => ({
					...card,
					flipped: false,
					correct: false,
					wrong: false
				}));

				// 开始记忆倒计时
				this.memoryTimer = setInterval(() => {
					this.memoryTimeLeft--;

					if (this.memoryTimeLeft <= 0) {
						clearInterval(this.memoryTimer);
						this.startAnswerPhase();
					}
				}, 1000);
			},

			startAnswerPhase() {
				this.gameState = 'answer';

				// 随机选择一个目标数字(1-10)
				this.targetNumber = Math.floor(Math.random() * 10) + 1;

				// 计算剩余目标数量
				this.remainingTargets = this.cards.filter(card => card.number === this.targetNumber).length;
			},

			cardClick(index) {
				if (this.gameState === 'memory') {
					this.cardClickCount++;
					// 点击卡片时的动画效果
					this.cards[index].flipped = true;
					setTimeout(() => {
						this.cards[index].flipped = false;
					}, 300);
				}
			},

			selectCard(index) {
				if (this.cards[index].flipped || this.cards[index].correct) return;

				// 翻转卡片
				this.cards[index].flipped = true;

				// 检查答案
				if (this.cards[index].number === this.targetNumber) {
					// 答对了
					this.cards[index].correct = true;
					this.score += 5;
					this.remainingTargets--;

					// 检查是否找完了所有目标
					if (this.remainingTargets === 0) {
						uni.showToast({
							title: '全部找到! +20奖励分',
							icon: 'none'
						});
						this.score += 20;

						// 延迟后进入下一轮
						setTimeout(() => {
							this.generateCards();
							this.startGame();
						}, 1500);
					} else {
						uni.showToast({
							title: '正确! +5分',
							icon: 'none'
						});
					}
				} else {
					// 答错了
					this.cards[index].wrong = true;
					this.lives--;

					if (this.lives <= 0) {
						// 游戏结束
						setTimeout(() => {
							this.gameState = 'gameover';
						}, 1000);
					}

					uni.showToast({
						title: '错误!',
						icon: 'none'
					});

					// 1秒后重置错误状态
					setTimeout(() => {
						this.cards[index].wrong = false;
						this.cards[index].flipped = false;
					}, 1000);
				}
			},

			resetGame() {
				this.score = 0;
				this.lives = 3;
				this.generateCards();
				this.gameState = 'prepare';
			},

			getResultMessage() {
				if (this.score >= 150) return '你是记忆大师!';
				if (this.score >= 100) return '表现非常出色!';
				if (this.score >= 50) return '不错的成绩!';
				return '继续练习会更好!';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		// height: 100vh;
		height: 120vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		font-family: 'Arial', sans-serif;

		&.landscape {
			flex-direction: row;
		}
	}

	.prepare-screen {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80%;
		max-width: 800px;
		text-align: center;

		.title {
			font-size: 42px;
			font-weight: bold;
			color: #2c3e50;
			margin-bottom: 15px;
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
		}

		.subtitle {
			font-size: 22px;
			color: #7f8c8d;
			margin-bottom: 40px;
			line-height: 1.4;
		}

		.start-btn {
			position: relative;
			background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
			color: white;
			border: none;
			border-radius: 50px;
			padding: 18px 40px;
			font-size: 20px;
			font-weight: bold;
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
			transition: all 0.3s;
			overflow: hidden;

			&:active {
				transform: scale(0.95);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}

			.btn-decor {
				position: absolute;
				top: -10px;
				right: -10px;
				width: 20px;
				height: 20px;
				background-color: #e74c3c;
				border-radius: 50%;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
			}
		}
	}

	.memory-screen,
	.answer-screen {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 60%;
		max-width: 1200px;

		.header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25px;

			.timer,
			.prompt {
				font-size: 26px;
				font-weight: bold;
				color: #2c3e50;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
			}

			.stats {
				display: flex;
				gap: 20px;

				.lives {
					color: #e74c3c;
					font-size: 26px;
				}

				.score {
					color: #f39c12;
					font-size: 26px;
				}
			}

			.progress-bar {
				width: 200px;
				height: 10px;
				background-color: #ecf0f1;
				border-radius: 5px;
				overflow: hidden;

				.progress {
					height: 100%;
					background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
					transition: width 1s linear;
				}
			}
		}
	}

	.card-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 15px;
		width: 100%;

		.card {
			aspect-ratio: 1;
			perspective: 1000px;
			cursor: pointer;
			position: relative;
			transition: all 0.3s;
			border-radius: 12px;
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60rpx;

			&:hover {
				transform: translateY(-5px) rotate(0deg) !important;
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
			}

			.card-front,
			.card-back {
				width: 100%;
				height: 100%;
				border-radius: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				backface-visibility: hidden;
				position: absolute;
				top: 0;
				left: 0;
				transition: all 0.6s;
				box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
			}

			.card-front {
				background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
				transform: rotateY(0deg);
				z-index: 2;

				.card-number {
					font-size: 28px;
					color: white;
					text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
				}
			}

			.card-back {
				background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
				transform: rotateY(180deg);

				.card-number {
					font-size: 28px;
					font-weight: bold;
					color: white;
					text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
				}
			}

			.card-effects {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				z-index: 3;

				.sparkle {
					position: absolute;
					width: 8px;
					height: 8px;
					background-color: white;
					border-radius: 50%;
					opacity: 0;
				}
			}

			&.flipped {
				.card-front {
					transform: rotateY(180deg);
				}

				.card-back {
					transform: rotateY(360deg);
				}
			}

			&.correct {
				animation: correct 0.8s forwards;

				.card-effects .sparkle {
					animation: sparkle 0.8s forwards;

					&:nth-child(1) {
						top: 20%;
						left: 20%;
						animation-delay: 0.2s;
					}

					&:nth-child(2) {
						top: 70%;
						left: 30%;
						animation-delay: 0.4s;
					}

					&:nth-child(3) {
						top: 40%;
						left: 80%;
						animation-delay: 0.6s;
					}
				}
			}

			&.wrong {
				animation: wrong 0.5s;
			}
		}
	}

	.game-over-screen {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;

		.result-card {
			background: white;
			border-radius: 20px;
			padding: 40px;
			width: 80%;
			max-width: 600px;
			text-align: center;
			box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
			transform-style: preserve-3d;
			perspective: 1000px;

			.title {
				font-size: 36px;
				font-weight: bold;
				color: #2c3e50;
				margin-bottom: 20px;
			}

			.final-score {
				font-size: 28px;
				color: #3498db;
				margin-bottom: 15px;
				display: block;
			}

			.message {
				font-size: 20px;
				color: #7f8c8d;
				margin-bottom: 30px;
				display: block;
			}

			.restart-btn {
				position: relative;
				background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
				color: white;
				border: none;
				border-radius: 50px;
				padding: 15px 35px;
				font-size: 18px;
				font-weight: bold;
				box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
				transition: all 0.3s;
				overflow: hidden;

				.btn-decor {
					position: absolute;
					bottom: -5px;
					right: -5px;
					width: 15px;
					height: 15px;
					background-color: #3498db;
					border-radius: 50%;
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				}

				&:active {
					transform: scale(0.95);
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				}
			}
		}
	}

	@keyframes correct {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes wrong {
		0% {
			transform: translateX(0);
		}

		20% {
			transform: translateX(-10px);
		}

		40% {
			transform: translateX(10px);
		}

		60% {
			transform: translateX(-10px);
		}

		80% {
			transform: translateX(10px);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes sparkle {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		50% {
			transform: scale(1.5);
			opacity: 0.8;
		}

		100% {
			transform: scale(0);
			opacity: 0;
		}
	}
</style>